<script>
import { selectUserMenu } from '@/api/authApi'
import { useAuthStore } from '@/stores/authStore'
import { mapState, mapWritableState } from 'pinia'
import { ArrowDown } from '@element-plus/icons-vue'
export default {
  components: {
    ArrowDown,
  },
  data() {
    return {
      msg: [],
    }
  },
  computed: {
    ...mapWritableState(useAuthStore, ['userA', 'token', 'menus', 'activeTitle']),
  },
  methods: {
    ...mapState(useAuthStore, ['clearStore']),
    async initMenus() {
      this.msg = await selectUserMenu()
    },
    loginOut() {
      this.clearStore()
      this.$router.push({
        name: 'login',
      })
    },
  },
  created() {
    this.initMenus()
  },
}
</script>
<template>
  <el-container class="home-box">
    <el-header>
      <div class="logo">
        <img src="@/assets/img/logo.png" alt="" />
        <span>教务管理系统</span>
      </div>
      <el-dropdown>
        <span class="el-dropdown-link">
          <img src="@/assets/img/user.jpg" alt="" srcset="" />
          <span>{{ userA?.username ?? '' }}</span>
          <el-icon class="el-icon--right">
            <ArrowDown></ArrowDown>
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="loginOut()">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header>
    <el-container class="box">
      <el-aside width="280px">
        <el-menu
          background-color="#324157"
          text-color="#FFFFFF"
          router
          :default-active="$route.path"
        >
          <el-menu-item
            v-for="s in msg"
            :key="s.right_id"
            :index="s.right_path"
            @click="activeTitle = s.right_name"
          >
            <el-icon v-html="s.right_icon"></el-icon>
            <span>{{ s.right_name }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <el-card class="data">
          <template #header>{{ activeTitle }}</template>
          <RouterView></RouterView>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>
<style scoped>
.el-header {
  background-color: #242f42;
}
.home-box {
  height: 100%;
}
.el-aside {
  height: 100%;
  background-color: #324157;
  color: white;
}
.el-menu {
  height: 50px;
}
.logo {
  height: 100%;
}
.logo img {
  height: 100%;
  transform: scale(0.7);
  border-radius: 10px;
  vertical-align: middle;
}
.logo span {
  font-size: 18px;
  vertical-align: middle;
}
/* 头部容器样式 - 影响下拉菜单的整体位置 */
.el-header {
  background-color: #242f42;
  color: white;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between; /* 关键：使logo和用户信息分居两侧 */
  align-items: center; /* 垂直居中 */
  padding: 0 20px; /* 添加内边距避免内容贴边 */
}

/* 下拉菜单容器样式 */
.el-dropdown {
  height: 100%; /* 占满header高度 */
  cursor: pointer; /* 鼠标悬停显示手型 */
  display: flex;
  align-items: center; /* 垂直居中 */
}

/* 下拉菜单触发链接样式 */
.el-dropdown :deep(.el-dropdown-link) {
  display: flex;
  flex-flow: row nowrap;
  align-items: center; /* 垂直居中 */
  color: white;
  height: 100%; /* 占满父容器高度 */
}

/* 用户头像样式 */
.el-dropdown img {
  height: 100%; /* 头像高度 */
  transform: scale(0.7); /* 缩放调整大小 */
  border-radius: 50%; /* 圆形头像 */
  margin-right: 8px; /* 与文字间距 */
}

/* 下拉菜单面板样式 */
:deep(.el-dropdown-menu) {
  background-color: #242f420b; /* 菜单背景色 */
  border: none; /* 去除边框 */
  margin-top: 5px; /* 与触发器的间距 */
  min-width: 120px; /* 最小宽度 */
}

/* 下拉菜单项样式 */
:deep(.el-dropdown-menu__item) {
  color: #fef7f7; /* 文字颜色 */
  padding: 8px 16px; /* 内边距 */
  font-size: 14px; /* 字体大小 */
  background-color: #0000004f;
}

/* 下拉菜单项悬停样式 */
:deep(.el-dropdown-menu__item:hover) {
  background-color: #324157; /* 悬停背景色 */
  color: #f7f3f3f0;
}

/* 下拉菜单箭头图标样式 */
.el-icon--right {
  margin-left: 8px; /* 与文字的间距 */
  transition: transform 0.3s; /* 旋转动画 */
}

/* 下拉菜单展开时箭头旋转 */
.el-dropdown :deep(.el-icon--right) {
  transform: rotate(0deg);
}
.el-dropdown.is-active :deep(.el-icon--right) {
  transform: rotate(180deg);
}
.el-menu-item.is-active :deep(svg *) {
  stroke: #409eff;
}
.el-card {
  height: 100%;
  box-sizing: border-box;
}
.box {
  height: 100%;
  overflow: hidden;
}
.data {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.data :deep(.el-card__body) {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
</style>
